<template>
  <div class="map-content">
    <BaseLeafletMap>
      <CityName
        v-if="componentsVisible.xm"
        :labels="componentsVisible.labels"
      ></CityName>
      <CountyName
        v-if="baseLeafletMapStore.selectCity"
        :selectCity="baseLeafletMapStore.selectCity"
      ></CountyName>
      <WarningPoint></WarningPoint>
    </BaseLeafletMap>
  </div>
</template>

<script setup lang="ts">
import * as L from 'leaflet'
import CityName from '@/layouts/cityName/index.vue'
import CountyName from '@/layouts/countyName/index.vue'
import WarningPoint from '@/pages/warning/components/map-components/warningPoint/index.vue'
import { createTileLayer } from '@quickearth/leaflet'
import { predefinedImageTiles } from '@quickearth/core'
import yulinGeojson from '@/assets/data/yulin.json'
import { whiteMapStyle } from '@/components/baseLeafletMap/map-style'
import { useWarningStore } from '@/pages/warning/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'

const warningStore = useWarningStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const componentsVisible = computed(() => warningStore.componentsVisible)

const initWarningMap = () => {
  useEventBus('handleAddLayer').emit(
    createTileLayer(predefinedImageTiles.tdtSatellite),
    'tdtSatellite'
  )
  useEventBus('handleAddLayer').emit(
    L.geoJSON(yulinGeojson, {
      style: whiteMapStyle
    }),
    'yulinWhite'
  )
}
onMounted(() => {
  initWarningMap()
})
</script>

<style scoped lang="scss">
.map-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
